<script setup>
//引入封装之后的axios网络请求
import { fetch24HourData } from "../api/weatherAPI";
import { initBaseLineEcharts } from "../util/echarts"
import { ref , watch } from 'vue';


//引入dayjs日期库
import dayjs from 'dayjs';

// 声明一个响应式数据，用来存放未来24小时天气的数据
const hour24 = ref([])
//表示此数据是空数组，用来存放api中返回的未来24小时天气数据
const updateTime = ref('')
//声明两个变量分别存放预报时间和温度
const hour24FxTime = ref([]) //存放未来24小时的预报时间
const hour24Temp = ref([])  //存放未来24小时的温度
//vue3中获取dom元素的方式
//1.声明一个图表库所需的获取dom元素的引用
var chartDom = ref(null)

//引入状态管理
import { useCityStore } from "../stores/cityStore";
//获取store实例
const cityStore = useCityStore()

//添加侦听器：监听状态管理中location状态的变化
watch(
  //监听的数据源
  () => cityStore.location,
  //回调函数，当数据源有变化时，需要做的事情
  () =>{
    getData(cityStore.location.id)
  },
  //第3个参数，即时回调，初始状态执行一个回调函数【网络请求未来24小时天气预报数据函数】
  { immediate: true}
)

//封装axios后的网络请求函数
async function getData(locationID) {
  const res = await fetch24HourData(locationID)
  // console.log(res);
  // 把接口中未来24小时数据存放
  hour24.value = res.hourly

  updateTime.value = dayjs(res.updateTime).format('YYYY年MM月DD日HH时mm分')
  //每次发起网络请求时把未来24小时的时间和温度初始化为空
  hour24FxTime.value = [];
  hour24Temp.value = [];
  //初始化未来24小时时间和温度的数组为空
  hour24FxTime.value = []
  hour24Temp.value = []
  // 给未来24小时时间和温度的数组添加内容
  hour24.value.forEach((element) => {
    hour24FxTime.value.push(element.fxTime) //预报时间
    hour24Temp.value.push(element.temp)  //温度
  });
  initBaseLineEcharts(
    chartDom.value,
    hour24FxTime.value.map((element) => dayjs(element).format('HH')),
    hour24Temp.value
  );

}

</script>

<template>
  <div>
    <!-- {{ hour24 }} -->
    <h1>未来24小时天气预报</h1>
    <p>天气最后更新时间:{{ updateTime }}</p>
    <!-- <<ui> 
       <li v-for="(item, index) in hour24" :key="index"> 
        {{ index }} - <span>预报时间:</span>{{ item.fxTime }} - <span>温度:</span>{{ item.temp }} 
      </li> 
     </ui>  -->
    <!-- 添加图标库所需要的容器 -->
    <!-- vue3中获取dom元素的方式，此为第二步，在容器元素中添加ref属性与第一步中的引用进行绑定 -->
    <div id="main" ref="chartDom"></div>


  </div>
</template>

<style scoped>
#main {
  width: 100%;
  height: 400px;

}
</style>
